<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8" />

	<link href="css/grid-bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="css/style-bootstrap.css" rel="stylesheet" type="text/css" />

	<title>Gridle | Bootstrap</title>

</head>
<body>

	<div class="container gridle-debug">

		<!-- buttons -->
		<div class="row">
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-default">Button</button>
			</div>
			<div class="col-md-1">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
			<div class="col-md-1 hidden-sm hidden-xs">
				<button type="button" class="btn btn-block btn-primary">Button</button>
			</div>
		</div>

		<!-- forms -->
		<div class="row">
			<div class="col-sm-4">
				<div class="form-group">
					<input type="text" class="form-control" placeholder=".col-sm-2">
				</div>
			</div>
			<div class="col-sm-4">
				<div class="form-group">
					<input type="text" class="form-control" placeholder=".col-sm-3">
				</div>
			</div>
			<div class="col-sm-4">
				<div class="form-group">
					<input type="text" class="form-control" placeholder=".col-xs-4">
				</div>
			</div>
		</div>

		<!-- posts -->
		<div class="row">

			<div class="col-sm-6 col-md-3 col-md-push-3">
				<div class="thumbnail">
					<div class="thumb"></div>
					<div class="caption">
						<h3>
							Post 1
						</h3>
						<p>
							Ut ligula dui, pellentesque vel tortor a, elementum bibendum justo. Fusce adipiscing nibh non felis feugiat, vel malesuada massa tempor. Nullam gravida sem ut diam mattis rutrum. Donec sit amet.
						</p>
						<p>
							<a href="#" class="btn btn-primary btn-block" role="button">
								More...
							</a>
						</p>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-md-pull-3">
				<div class="thumbnail">
					<div class="thumb"></div>
					<div class="caption">
						<h3>
							Post 2
						</h3>
						<p>
							Ut ligula dui, pellentesque vel tortor a, elementum bibendum justo. Fusce adipiscing nibh non felis feugiat, vel malesuada massa tempor. Nullam gravida sem ut diam mattis rutrum. Donec sit amet.
						</p>
						<p>
							<a href="#" class="btn btn-primary btn-block" role="button">
								More...
							</a>
						</p>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="thumbnail">
					<div class="thumb"></div>
					<div class="caption">
						<h3>
							Post 3
						</h3>
						<p>
							Ut ligula dui, pellentesque vel tortor a, elementum bibendum justo. Fusce adipiscing nibh non felis feugiat, vel malesuada massa tempor. Nullam gravida sem ut diam mattis rutrum. Donec sit amet.
						</p>
						<p>
							<a href="#" class="btn btn-primary btn-block" role="button">
								More...
							</a>
						</p>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="thumbnail">
					<div class="thumb"></div>
					<div class="caption">
						<h3>
							Post 4
						</h3>
						<p>
							Ut ligula dui, pellentesque vel tortor a, elementum bibendum justo. Fusce adipiscing nibh non felis feugiat, vel malesuada massa tempor. Nullam gravida sem ut diam mattis rutrum. Donec sit amet.
						</p>
						<p>
							<a href="#" class="btn btn-primary btn-block" role="button">
								More...
							</a>
						</p>
					</div>
				</div>
			</div>

		</div>

		<!-- table -->
		<div class="row">
			
			<div class="col-12">

				<div class="table-responsive">
					<table class="table">
						<thead>
							<tr>
								<th>#</th>
								<th>Table heading</th>
								<th>Table heading</th>
								<th>Table heading</th>
								<th>Table heading</th>
								<th>Table heading</th>
								<th>Table heading</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
							</tr>
							<tr>
								<td>2</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
							</tr>
							<tr>
								<td>3</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
								<td>Table cell</td>
							</tr>
						</tbody>
					</table>
				</div>

			</div>

		</div>

		<!-- etc... -->
		<div class="row">
			
			<div class="col-12">
				
				<button type="button" class="btn btn-success btn-block">
					etc...
				</button>

			</div>

		</div>

	</div>

</body>
</html>